import React from 'react';
import { RangePicker } from '@/components/Mobile';
import styles from './index.less';

const MyComponent = ({ value, children }) => (
    <div style={{ display: 'flex', alignItems: 'center' }}>
        {value && value.length > 0 ? (
            <div style={{ display: 'flex', alignItems: 'center', color: '#2a2f3c' }}>
                <div>{value?.[0]}</div>
                <div style={{ margin: '0 12px' }}>-</div>
                <div>{value?.[1] || '至今'}</div>
            </div>
        ) : (
            children
        )}
    </div>
);

const DateRangePicker = React.forwardRef(({ title, children, ...rest }, ref) => (
    <RangePicker ref={ref} className={styles.customPicker} {...rest}>
        <MyComponent>{children}</MyComponent>
    </RangePicker>
));

export default DateRangePicker;
